<style lang="less">
@import './style.less';
</style>

<template>
    <div class="classification">
        <tree-ex tree-title="业务模版分类"
                 :data="businessClasses"
                 :props="{ children: 'subClasses', label: 'name' }"
                 :operations="operations"
                 :default-expanded-keys="defaultExpandedKeys"
                 :on-node-click="onClassClick"
                 :on-operation="onOperation" />
        <dialog-ex v-if="dialogMode"
                   title="业务模版分类"
                   :mode="dialogMode"
                   :form="form"
                   :init="currentClass" />
    </div>
</template>

<script>
    /**
     * 业务分类
     */
    import { mapGetters, mapActions, mapMutations } from 'vuex'
    import treeEx from '@/components/tree/treeEx'
    import dialogEx from '@/components/dialog/dialogEx'
    import pageConfig from './config'

    export default {
        name: 'businessClass',
        components: {
            'tree-ex': treeEx,
            'dialog-ex': dialogEx
        },
        data() {
            return {
                dialogMode: null,
                currentClass: null,
                defaultExpandedKeys: null,
                operations: pageConfig.business.operations,
                form: {
                    items: pageConfig.business.classFormItems,
                    default: { enabled: true },
                    actions: {
                        confirm: (data, mode) => {
                            this.dialogMode = null
                            this.onConfirm(data, mode)
                        },
                        cancel: () => (this.dialogMode = null)
                    }
                }
            }
        },
        mounted() {
            this.getBusinessClasses()
        },
        computed: {
            ...mapGetters(['businessClasses'])
        },
        methods: {
            ...mapActions(['getBusinessClasses', 'saveBusinessClass', 'removeBusinessClass']),
            onClassClick(currentClass) {
                this.currentClass = currentClass
                console.log('onClassClick', currentClass)
            },
            onOperation(e) {
                if (e.prop === 'refresh') {
                    this.currentClass = null
                    this.getBusinessClasses()
                } else if (e.prop === 'add') {
                    this.dialogMode = 'add'
                } else if (e.prop === 'edit') {
                    this.dialogMode = 'edit'
                } else if (e.prop === 'delete' && this.currentClass && this.currentClass.id) {
                    this.removeBusinessClass(this.currentClass.id)
                    this.currentClass = null
                }
                console.log(e)
            },
            onConfirm(data, mode) {
                if (mode === 'add' && this.currentClass) {
                    data.classParentId = this.currentClass.id
                    this.defaultExpandedKeys = [this.currentClass.id]
                    this.currentClass = null
                }
                this.saveBusinessClass(data)
            }
        }
    }
</script>